import type { ComponentsConfig, ComponentsConfigRaw } from '../../types'
import { extendSchemas } from '@/components/cms/utils'
import advsConfig from './base/advs'
import { articleTabBar, briefIntroductionContent, collectionReading } from './simples'

const basePath = 'template.articleHome'
const config: ComponentsConfig = {
  default: 'articleTabBar',
  components: extendSchemas<ComponentsConfigRaw>(
    {
      articleTabBar: articleTabBar({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.categoriesBar.style`,
          border: {
            color: `${basePath}.content.categoriesBar.border.color`,
            width: `${basePath}.content.categoriesBar.border.width`,
            radius: `${basePath}.content.categoriesBar.border.radius`
          },
          fill: `${basePath}.content.categoriesBar.fill`,
          text: {
            color: `${basePath}.content.categoriesBar.text.color`,
            size: `${basePath}.content.categoriesBar.text.size`,
            letterSpacing: `${basePath}.content.categoriesBar.text.letterSpacing`,
            lineHeight: `${basePath}.content.categoriesBar.text.lineHeight`
          }
        }
      }),
      briefIntroductionContent: briefIntroductionContent({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          maxLine: `${basePath}.content.synopsis.maxLine`,
          background: `${basePath}.content.synopsis.background`,
          moreButton: {
            enable: `${basePath}.content.synopsis.moreButton.enable`,
            style: `${basePath}.content.synopsis.moreButton.style`
          }
        }
      }),
      collectionReading: collectionReading({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.bottomBar.style`,
          background: `${basePath}.content.bottomBar.background`,
          collection: {
            fill: `${basePath}.content.bottomBar.collection.fill`,
            color: `${basePath}.content.bottomBar.collection.color`
          },
          read: {
            fill: `${basePath}.content.bottomBar.read.fill`,
            color: `${basePath}.content.bottomBar.read.color`
          }
        }
      })
    },
    advsConfig(['playerBeforeAdv', 'playerPauseAdv'])
  )
}
export default config
